<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雇主招聘管理首页</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
            max-width: 750px;
            margin: 0 auto;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .tab-active {
            color: #4f46e5;
            position: relative;
        }
        .tab-active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #4f46e5;
            border-radius: 2px;
        }
        
        /* Enhanced filter button styles */
        .filter-container {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .filter-container::-webkit-scrollbar {
            display: none;
        }
        
        /* Improved search input focus state */
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        /* Floating Action Button (FAB) styles */
        .fab {
            position: fixed;
            bottom: 80px; /* Above bottom navigation */
            right: 20px;
            width: 56px;
            height: 56px;
            background-color: #4f46e5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
            text-decoration: none;
        }
        
        .fab i {
            color: white;
            font-size: 20px;
        }
        
        /* Ensure FAB is properly positioned within max-width container */
        @media (min-width: 750px) {
            .fab {
                right: calc(50% - 375px + 20px);
            }
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部筛选区 -->
    <div class="bg-white p-4 shadow-sm sticky top-0 z-10">
        <div class="mb-4">
            <div class="flex space-x-3 overflow-x-auto pb-2 filter-container">
                <button class="px-5 py-2 rounded-full bg-indigo-100 text-indigo-700 font-medium whitespace-nowrap transition-all duration-200 hover:bg-indigo-200">全部</button>
                <button class="px-5 py-2 rounded-full text-gray-600 hover:bg-gray-100 whitespace-nowrap transition-all duration-200">招聘中</button>
                <button class="px-5 py-2 rounded-full text-gray-600 hover:bg-gray-100 whitespace-nowrap transition-all duration-200">已结束</button>
                <button class="px-5 py-2 rounded-full text-gray-600 hover:bg-gray-100 whitespace-nowrap transition-all duration-200">草稿</button>
            </div>
        </div>
        <div class="relative">
            <input type="text" placeholder="搜索职位名称..." class="search-input w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>

    <!-- 职位列表区 -->
    <div class="p-4 pb-24">
        <!-- 职位卡片1 -->
        <div class="bg-white rounded-lg p-4 mb-4 shadow-sm card-hover">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-lg font-semibold">高级前端开发工程师</h3>
                    <div class="flex items-center text-sm text-gray-500 mt-1">
                        <span class="mr-3"><i class="fas fa-briefcase mr-1"></i>技术</span>
                        <span><i class="fas fa-map-marker-alt mr-1"></i>北京</span>
                    </div>
                </div>
                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">招聘中</span>
            </div>
            <div class="flex justify-between items-center">
                <div>
                    <span class="text-indigo-600 font-medium">25K-40K·15薪</span>
                    <div class="text-sm text-gray-500 mt-1">
                        <span><i class="fas fa-user-friends mr-1"></i>12人应聘</span>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">编辑</button>
                    <button class="px-3 py-1 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">查看应聘</button>
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">下架</button>
                </div>
            </div>
        </div>

        <!-- 职位卡片2 -->
        <div class="bg-white rounded-lg p-4 mb-4 shadow-sm card-hover">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-lg font-semibold">产品经理</h3>
                    <div class="flex items-center text-sm text-gray-500 mt-1">
                        <span class="mr-3"><i class="fas fa-briefcase mr-1"></i>产品</span>
                        <span><i class="fas fa-map-marker-alt mr-1"></i>上海</span>
                    </div>
                </div>
                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">草稿</span>
            </div>
            <div class="flex justify-between items-center">
                <div>
                    <span class="text-indigo-600 font-medium">20K-35K·14薪</span>
                    <div class="text-sm text-gray-500 mt-1">
                        <span><i class="fas fa-user-friends mr-1"></i>0人应聘</span>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">编辑</button>
                    <button class="px-3 py-1 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">查看应聘</button>
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">下架</button>
                </div>
            </div>
        </div>

        <!-- 职位卡片3 -->
        <div class="bg-white rounded-lg p-4 mb-4 shadow-sm card-hover">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-lg font-semibold">UI设计师</h3>
                    <div class="flex items-center text-sm text-gray-500 mt-1">
                        <span class="mr-3"><i class="fas fa-briefcase mr-1"></i>设计</span>
                        <span><i class="fas fa-map-marker-alt mr-1"></i>深圳</span>
                    </div>
                </div>
                <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">已结束</span>
            </div>
            <div class="flex justify-between items-center">
                <div>
                    <span class="text-indigo-600 font-medium">18K-30K·13薪</span>
                    <div class="text-sm text-gray-500 mt-1">
                        <span><i class="fas fa-user-friends mr-1"></i>8人应聘</span>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">编辑</button>
                    <button class="px-3 py-1 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">查看应聘</button>
                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50">下架</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 空状态 -->
    <!-- <div class="flex flex-col items-center justify-center py-16 px-4 text-center">
        <img src="https://s.coze.cn/image/G2w2R2EI7PQ/" alt="空状态" class="w-48 h-48 mb-6">
        <h3 class="text-xl font-medium mb-2">暂无职位</h3>
        <p class="text-gray-500 mb-6">您还没有发布任何职位，点击下方按钮立即发布</p>
        <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center">
            <i class="fas fa-plus mr-2"></i>发布职位
        </button>
    </div> -->

    <!-- 浮动操作按钮 (FAB) -->
    <a href="employer-job-publish.html" class="fab" id="fabButton">
        <i class="fas fa-plus"></i>
    </a>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="employer-homepage.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="employer-aunt-management.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user-friends text-xl"></i>
                <span class="text-xs mt-1">阿姨</span>
            </a>
            <a href="employer-job-management.html" class="flex flex-col items-center px-2 py-2 text-indigo-600 relative">
                <i class="fas fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">招聘</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-indigo-600 rounded-full"></div>
            </a>
            <a href="employer-my-page.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <script>
        // 状态筛选功能
        document.querySelectorAll('.flex.space-x-3 button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.flex.space-x-3 button').forEach(btn => {
                    btn.classList.remove('bg-indigo-100', 'text-indigo-700');
                    btn.classList.add('text-gray-600', 'hover:bg-gray-100');
                });
                this.classList.add('bg-indigo-100', 'text-indigo-700');
                this.classList.remove('text-gray-600', 'hover:bg-gray-100');
            });
        });

        // 搜索功能
        const searchInput = document.querySelector('input[type="text"]');
        searchInput.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                const keyword = this.value.toLowerCase();
                document.querySelectorAll('.bg-white.rounded-lg').forEach(card => {
                    const title = card.querySelector('h3').textContent.toLowerCase();
                    if (title.includes(keyword)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            }
        });

        // 查看应聘按钮点击事件
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.textContent.trim() === '查看应聘') {
                    window.location.href = 'employer-applicant-list.html';
                }
            });
        });

        // FAB 点击事件处理
        const fabButton = document.getElementById('fabButton');
        if (fabButton) {
            fabButton.addEventListener('click', function(e) {
                // 添加点击反馈效果
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 150);
            });
        }
    </script>
</body>
</html>